<template>
  <div>
    <el-tooltip :content="$t('msg.navBar.guide')">
      <i
        id="guide-start"
        class="iconfont icon-yindao yindao"
        @click="onClick"
      ></i>
    </el-tooltip>
  </div>
</template>

<script>
import Driver from "driver.js";
import "driver.js/dist/driver.min.css";
import i18n from "../../i18n/index";
import steps from "./steps";
export default {
  data() {
    return {
      driver: null,
    };
  },
  mounted() {
    this.driver = new Driver({
      // 关闭蒙版
      allowClose: false,
      closeBtnText: i18n.t("msg.guide.close"),
      nextBtnText: i18n.t("msg.guide.next"),
      prevBtnText: i18n.t("msg.guide.prev"),
    });
  },
  methods: {
    onClick() {
      this.driver.defineSteps(steps(i18n));
      this.driver.start();
    },
  },
};
</script>

<style scoped lang='scss'>
.yindao {
  font-size: 24px;
}
</style>
